<template>
    <span v-if="showAll">{{ value }}</span>
    <span v-else>{{ record[fieldName] }}</span>
    <span class="m-l-5" v-if="!showAll" @click="openShow"><EyeOutlined /></span>
    <a-modal v-model:open="open" title="查看信息" @ok="handleOk">
        <a-input v-model:value="password" type="password" placeholder="请输入密码" />
    </a-modal>
</template>

<script lang="ts" setup>
import { EyeOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
import { ref } from 'vue';

    const props = defineProps<{
        record:any;
        fieldName:string;
        api : (password:string) => any;
    }>()

    const password = ref('')

    const value = ref()
    const showAll = ref(false)
    const open = ref(false)

    function openShow() {
        password.value = ''
        open.value = true
    }


    async function handleOk() {
        if(!password.value) return
        const r = await props.api(password.value)
        if(r.success) {
            value.value = r.data[props.fieldName]
            showAll.value = true
            open.value = false
        }else {
            message.error(r.msg)
        }
    }
</script>